<template>
	<view class="flex1 flex_c" style="position: relative;;height: 100%;width: 100%;">
		
		<view class="flex_r fj_b fa_c custom-page-title">
			<view class=""></view>
			<view class="text_34 bold_">
				结伴旅游
			</view>
			<view class="">发布</view>
		</view>
		<scroll-view class="flex1 custom-page" scroll-y @scrolltolower="scrolltolower" refresher-enabled
			:refresher-triggered="refresherTriggered" @refresherrefresh="refresherrefresh">
			<view style="height: 100rpx;"></view>
			<view class="item" v-for="(item,index) in 9">
				<view class="flex_r item-t">
					<view class="item-t-img"></view>
					<view class="flex1 item-t-l">
						<view class="item-t-l-title">
							万达广场喝茶
						</view>
						<view class="flex_r label">
							<view class="label-item">
								喜茶
							</view>
							<view class="label-item">
								五分糖
							</view>
						</view>
						<view class="text_20 color_ row">
							2023-10-22
						</view>
						<view class="text_20 color_ row">
							万达广场
						</view>
						<view class="flex_r label">
							<view class="label-item">
								2人
							</view>
							<view class="label-item">
								不限男女
							</view>
						</view>
					</view>
				</view>
				<view class="flex_r fa_c item-b">
					<view class="item-b-img">
					</view>
					<view class="item-b-num">
						4232
					</view>
					<view class="item-b-icon">
						<!-- 男 -->
						<!-- <image class="img" src="@/pages/m-pages/m-my/img/ic_boy.png" mode="aspectFill"></image> -->
						<!-- 女 -->
						<image class="img" src="@/pages/m-pages/m-my/img/ic_girl.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refresherTriggered: false
			}
		},
		created() {
			console.log("创建1")
		},
		methods: {
			scrolltolower() {
				uni.showToast({
					title: '触底',
					duration: 1000
				});
			},

			refresherrefresh() {
				uni.showToast({
					title: '下拉',
					duration: 1000
				});
				this.refresherTriggered = true
				setTimeout(() => {
					this.refresherTriggered = false
				},1000)
			}
		}
	}
</script>

<style scoped lang="scss">
	.custom-page-title {
		box-sizing: border-box;
		position: absolute;
		padding: 0 20rpx;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		width: 100%;
		height: 100rpx;
		background-color: #e3ecfb;
	}
	.custom-page {
		width: 100%;
		height: 0;
		.item{
			box-sizing: border-box;
			padding: 20rpx;
			width: calc(100% - 40rpx);
			margin: 20rpx auto;
			border-radius: 20rpx;
			background-color: rgba(246, 246, 246, 0.6);
			.item-t{
				.item-t-img{
					width: 230rpx;
					height: 230rpx;
					background-color: #999;
					border-radius: 20rpx;
					overflow: hidden;
					margin-right: 20rpx;
				}
				.item-t-l{
					.item-t-l-title{
						margin-bottom: 16rpx;
					}
					.label{
						width: 100%;
						min-height: 40rpx;
						margin-top: 6rpx;
						.label-item{
							box-sizing: border-box;
							padding: 0 16rpx;
							line-height: 40rpx;
							border-radius: 10rpx;
							background-color: #d0cfdf;
							margin-bottom: 10rpx;
							font-size: 24rpx;
							margin-right: 20rpx;
						}
					}
					
					.row{
						min-height: 40rpx;
					}
				}
			}
			
			.item-b{
				width: 100%;
				height: 70rpx;
				margin-top: 18rpx;
				.item-b-img{
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%; 
					overflow: hidden;
					background-color: #999;
				}
				.item-b-num{
					margin: 0 40rpx 0 20rpx;
				}
				.item-b-icon{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		
	}
</style>